<template>
  <el-row>
    <el-col>
      <el-input v-model="Serch.input" placeholder="请输入学号" style="width:20%" />
      <el-button type="primary">查询</el-button>
      <el-button type="primary" @click="addstudentdialog = true">添加学生资料</el-button>
    </el-col>
  </el-row>

  <el-table :data="StudentTable" border stripe style="width: 100%">
    <el-tableColumn label="学号" prop="sno"></el-tableColumn>
    <el-tableColumn label="姓名" prop="name"></el-tableColumn>
    <el-tableColumn label="学院" prop="academy"></el-tableColumn>
    <el-tableColumn label="专业" prop="major"></el-tableColumn>
    <el-tableColumn label="班级" prop="classes"></el-tableColumn>
    <el-tableColumn label="操作" prop="operation">
      <el-button type="primary" size="mini" @click="editstudentdialog = true">编辑
      </el-button>
      <el-button type="danger" size="mini" @click="deletestudentdialog = true">删除
      </el-button>
    </el-tableColumn>
  </el-table>

  <el-dialog title="添加学生资料" v-model="addstudentdialog" width="50%" draggable>
    <el-form label-width="70px">

      <el-form-item label="学号">
        <el-input v-model="add.sno" placeholder="请输入学号"></el-input>
      </el-form-item>

      <el-form-item label="姓名">
        <el-input v-model="add.name" placeholder="请输入姓名"></el-input>
      </el-form-item>

      <el-form-item label="学院">
        <el-input v-model="add.academy" placeholder="请输入学院"></el-input>
      </el-form-item>

      <el-form-item label="专业">
        <el-input v-model="add.major" placeholder="请输入专业"></el-input>
      </el-form-item>

      <el-form-item label="班级">
        <el-input v-model="add.classes" placeholder="请输入班级"></el-input>
      </el-form-item>

    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="addstudentdialog = false">取 消</el-button>
      <el-button type="primary">确 定</el-button>
    </span>
  </el-dialog>


  <el-dialog title="修改学生资料" v-model="editstudentdialog" width="50%" draggable>
    <el-form label-width="70px">

      <el-form-item label="学号">
        <el-input v-model="edit.sno" placeholder="请输入学号"></el-input>
      </el-form-item>

      <el-form-item label="姓名">
        <el-input v-model="edit.name" placeholder="请输入姓名"></el-input>
      </el-form-item>

      <el-form-item label="学院">
        <el-input v-model="edit.academy" placeholder="请输入学院"></el-input>
      </el-form-item>

      <el-form-item label="专业">
        <el-input v-model="edit.major" placeholder="请输入专业"></el-input>
      </el-form-item>

      <el-form-item label="班级">
        <el-input v-model="edit.classes" placeholder="请输入班级"></el-input>
      </el-form-item>

    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="editstudentdialog = false">取 消</el-button>
      <el-button type="primary">确 定</el-button>
    </span>
  </el-dialog>


  <el-dialog title="删除学生资料" v-model="deletestudentdialog" width="50%" draggable>

    <el-form label-width="70px">

      <el-form-item label="学号">
        <el-input v-model="deletes.sno" placeholder="请输入学号"></el-input>
      </el-form-item>

    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="deletestudentdialog = false">取 消</el-button>
      <el-button type="primary">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      Serch: {
        input: ""
      },
      StudentTable: [
        {
          sno: "1",
          name: "1",
          academy: "1",
          major: "1",
          classes: "1"
        }
      ],
      addstudentdialog: false,
      add: {
        sno: "",
        name: "",
        acamedy: "",
        major: "",
        classes: ""
      },
      editstudentdialog: false,
      edit: {
        sno: "",
        name: "",
        acamedy: "",
        major: "",
        classes: ""
      },
      deletestudentdialog: false,
      deletes: {
        sno: ""
      }
    }
  }
}
</script>